<template>
	<view>
		<view class="" style="height: var(--status-bar-height);
		  width: 100%;">
		</view>
		<view class="list" >
			<view class="" v-for="(item,index) in list"  @click="Telephone_interview_details(item.id)">
			
				<view class="indexbody" >
					<view class="indexbody_title">
						<view>走访人</view>
						<view v-if="item.check_status==0" style="color:#1991FF;font-size:28rpx">待审核</view>
						<view v-else-if="item.check_status==1" style="color:#60C17D;font-size:28rpx">合格</view>
						<view v-else-if="item.check_status==2" style="color:#D5603B;font-size:28rpx">不合格</view>
					</view>
					<view class="indexbody_content">
						<view class="">
							<text>{{item.name}}</text>
							<text v-if="item.sex==1">男</text>
							<text v-else-if="item.sex==0">女</text>
							<text>{{item.age}}岁</text>
							<text>{{item.idcard}}</text>
						</view>
					</view>
					
					<view class="indexbody_bottom">
						<view class="indexbody_date">
							<text  v-if="item.type==0">
								暂无
							</text>
							<text class="tel"  v-else-if="item.type==1">
								电访
							</text>
							<text class="face"  v-else-if="item.type==2">
								面访
							</text>
						</view>
						<view class="indexbody_time" style="padding-bottom:44rpx;">
							<text>回访时间: {{item.createtime}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="loadingText">{{loadingText}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				loadingText: '',
				time_type:0
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList();
		},
		onReachBottom() {
			this.loadingText = "上拉显示更多"
			this.getMoreList();
		},
		onLoad(option) {
			this.time_type = option.type;
		},
		onShow(){
			
			this.list = [];
			this.page = 1;
			this.getList();  
		},
		methods: {
			getMoreList() {
				this.loadingText = '-- 正在加载 --'
				let obj = {};
				 obj.page=this.page;
				 obj.time_type = this.time_type;
				this.$api.post('/api/villagers/visitList',obj).then(res => {
					if (res.code == 1) {
						this.info = res.data;
						if (res.data.list.length == 0 || res.data.list == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						var newlist = res.data.list;
						this.list = this.list.concat(newlist)
						this.page++
					} else {
						this.toastMsg(res.msg);
					}
				});
			},
			
			getList() {
				console.log(666)
				let obj = {};
				 obj.page=this.page;
				  obj.time_type = this.time_type;
				this.$api.post('/api/villagers/visitList',obj).then((res) => {
					if (res.code == 1) {
						if (res.data.list.length == 0 || res.data.list == null) {
							this.loadingText = '-- 暂无更多 --'
							return false;
						}
						this.list = res.data.list;
						uni.stopPullDownRefresh()
						this.page++
					} else {
						this.toastMsg(res.msg);
					}
				})
			},
			Telephone_interview_details(id){
				
				uni.navigateTo({
					url: '../mayor/QuDetails?villager_id='+id
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #EFF1F5;
	}
</style>
<style scoped lang="scss">
	.loadingText {
		padding: 20rpx 0 40rpx 0;
		text-align: center;
		color: #310D05;
		font-size: 28rpx;
	}
.indexbody {
		margin: 30rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	
		.indexbody_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
	
			img {
				width: 40rpx;
				height: 40rpx;
			}
	
			:first-child {
				font-weight: bold;
			}
	
			:last-child {
				color: #CCCCCC;
				font-size: 24rpx;
			}
		}
	
		.indexbody_content {
	
			background-color: #F8F8F8;
			margin: 10rpx 40rpx;
			padding: 10rpx;
			font-size: 30rpx;
	
			text {
				padding: 0 16rpx;
				border-right: 2rpx solid #333333;
			}
	
			:last-child {
				border-right: none;
			}
		}
	
		.indexbody_address {
			display: flex;
			margin: 20rpx 20rpx;
	
			img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	
		.indexbody_time {
			margin: 16rpx 20rpx;
			font-size:24rpx ;
			color:#AAAAAA
		}
	
		.indexbody_bottom {
			display: flex;
			justify-content: flex-start;
		    align-items: center;
			margin: 40rpx 0 40rpx 40rpx;
	
			.indexbody_date {
	
				padding-bottom: 40rpx;
	
				.tel {
					padding: 6rpx;
					font-size:28rpx;
					background-color: #EFF2FA;
					color: #5F7FD0;
					
				}
				.face{
					padding: 6rpx;
					font-size:28rpx;
					background-color: #FAF6EF;
					color: #D0AA5F;
				}
			}
	
			.Pass {
				img {
					width: 140rpx;
					height:122rpx;
				}
	
			}
		}
	
	}
</style>
